<template>
  <div class="yzh-basic">
    <div class="flex justify-between pb-5 items-center">
      <TitleName
        title="回款情况"
        icon="i-carbon-bookmark-filled"
        class="title"
      ></TitleName>
      <el-row class="w-8/12 items-center" :gutter="20" justify="space-between">
        <el-col :span="14">
          订单总金额：<span class="text-blue-500"
            >¥{{ countCrudData.orderPrice }}</span
          >
          已回款金额：<span class="text-blue-500"
            >¥{{ countCrudData.repaymentPrice }}</span
          >未回款金额：<span class="text-blue-500"
            >¥{{ countCrudData.unRepaymentPrice }}</span
          >
          逾期回款金额：<span class="text-blue-500"
            >¥{{ countCrudData.overduePrice }}</span
          ></el-col
        >
        <el-col :span="5">
          <el-button class="w-full" type="primary" @click="handleUpdate">
            配置回款计划</el-button
          ></el-col
        ><el-col :span="5">
          <el-button class="w-full" type="primary" plain @click="handleAdd"
            >添加回款记录</el-button
          >
        </el-col>
      </el-row>
    </div>
    <RepaymentPlan :dataList="planData.list" :countData="planData.count" />
    <RepaymentRecord :tableParam="recordData" />

    <!-- 配置计划、回款记录 -->
    <el-dialog
      v-if="dialogOpton.open"
      :title="dialogOpton.title"
      v-model="dialogOpton.open"
      width="80%"
      :close-on-click-modal="false"
    >
      <RepaymentPlanForm
        v-show="dialogOpton.title == '配置回款计划'"
        ref="repaymentPlanForm"
        :isDialog="true"
        :orderId="formData.orderId"
      />
      <RepaymentForm
        v-show="dialogOpton.title == '添加回款记录'"
        ref="repaymentForm"
        :isDialog="true"
        :repaymentData="repaymentFormData"
      />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogOpton.open = false">取 消</el-button>
          <el-button type="primary" @click="handleStopSubmit">保存</el-button>
        </span></template
      >
    </el-dialog>
  </div>
</template>
<script setup name="RepaymentInfo">
import { reactive, toRefs, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import useCommonStore from '@/store/modules/common'
import { getRepaymentDetail } from '@/api/repaymentManage/repayment'
import {
  bidding_unit //内部单位
} from '@/hooks/dict/order'
import RepaymentPlan from '@/views/financialManage/repaymentManage/modules/repaymentPlan'
import RepaymentPlanForm from '@/views/financialManage/repaymentPlan/modules/repaymentPlanForm'
import RepaymentForm from '@/views/financialManage/repaymentManage/modules/repaymentForm'
import RepaymentRecord from '@/views/financialManage/repaymentManage/modules/repaymentRecord'
const router = useRouter()
const route = useRoute()
const props = defineProps({
  orderId: {
    type: [String, Number],
    require: true
    // default: () => {
    //   return {
    //     id: '',
    //     orderType: 'ord_order' //ord_order销售订单  ord_purchase_order采购订单
    //   }
    // }
  }
})
const { proxy } = getCurrentInstance()
const commonStore = useCommonStore()
const sortOptions = ref([])
const companyData = ref([])
commonStore.getCompanyData().then(e => {
  companyData.value = e
})
const data = reactive({
  formData: [],
  countCrudData: {
    orderPrice: '-', //订单总金额
    repaymentPrice: '-', //已回款金额
    unRepaymentPrice: '-', //未回款金额
    overduePrice: '-' //逾期回款金额
  },
  planData: {
    list: [],
    count: {}
  },
  recordData: {
    id: '',
    type: 'order'
  },
  total: 0,
  queryParams: {
    pageNum: 1,
    pageSize: 10
  },
  dialogOpton: {
    open: false,
    title: '配置回款计划'
  },
  repaymentFormData: {}
})
let {
  formData,
  countCrudData,
  planData,
  recordData,
  total,
  queryParams,
  dialogOpton,
  repaymentFormData
} = toRefs(data)

watchEffect(() => {
  if (props.orderId) {
    getFormData(props.orderId)
  }
})
// 获取表单信息
function getFormData(id) {
  getRepaymentDetail(id).then(async res => {
    let resData = {}
    resData = res.data
    formData.value = res.data
    let {
      allPeriod, //总期次
      repaymentProportion, //总回款占比
      orderPrice, //订单总金额
      repaymentPrice, //已回款金额
      unRepaymentPrice, //未回款金额
      overduePrice, //逾期回款金额
      repaymentPlanList, //回款期次
      repaymentList //回款记录
    } = resData
    countCrudData.value = {
      orderPrice,
      repaymentPrice,
      unRepaymentPrice,
      overduePrice
    }

    planData.value.count = {
      orderPrice,
      allPeriod,
      repaymentProportion,
      repaymentPrice
    }
    console.log('repaymentPlanList==>', repaymentPlanList)
    planData.value.list = repaymentPlanList
    // recordData.value.list = repaymentList
  })
  recordData.value.id = id
}

function goTo(url, data) {
  router.push({ path: url, query: data })
}
// 配置回款计划
function handleUpdate() {
  // goTo('/financial/repaymentPlanForm', { salesOrderId: formData.value.orderId })
  dialogOpton.value.open = true
  dialogOpton.value.title = '配置回款计划'
}
//  添加回款记录
function handleAdd() {
  let { customerId, customerName, orderId, orderTitle } = formData.value
  // goTo('/financial/repaymentForm', {
  //   repaymentData: JSON.stringify({
  //     customerId,
  //     customerName: proxy.selectDictLabel(
  //       bidding_unit.value,
  //       formData.value.customerId
  //     ),
  //     orderId,
  //     orderTitle
  //   })
  // })
  dialogOpton.value.open = true
  dialogOpton.value.title = '添加回款记录'
  repaymentFormData.value = {
    customerId,
    customerName: proxy.selectDictLabel(
      bidding_unit.value,
      formData.value.customerId
    ),
    orderId,
    orderTitle
  }
}

function handleStopSubmit() {
  if (dialogOpton.value.title == '配置回款计划') {
    proxy.$refs.repaymentPlanForm.handleSubmit().then(e => {
      if (e.code !== 200) return
      proxy.$modal.msgSuccess('保存成功')
    })
  } else if (dialogOpton.value.title == '添加回款记录') {
    proxy.$refs.repaymentForm.handleSubmit().then(e => {
      if (e.code !== 200) return
      proxy.$modal.msgSuccess('保存成功')
    })
  }
}
</script>
<style lang="scss" scoped>
.title {
  font-size: 16px;
  font-weight: 600;
}
</style>
